<template>
	<div class="tab-container">
		<el-tag>mounted times ：{{ createdTimes }}</el-tag>
		<el-alert :closable="false" style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success"></el-alert>
		<el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
			<el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
				<keep-alive>
					<tab-pane v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes"></tab-pane>
				</keep-alive>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
    const tabPane = httpVueLoader(module.base +'./components/TabPane.vue');

	module.exports = {
		name: 'Tab',
		components: { "tab-pane": tabPane },
		data() {
			return {
				tabMapOptions: [
					{ label: 'China', key: 'CN' },
					{ label: 'USA', key: 'US' },
					{ label: 'Japan', key: 'JP' },
					{ label: 'Eurozone', key: 'EU' }
				],
				activeName: 'CN',
				createdTimes: 0
			}
		},
		watch: {
			activeName(val) {
				this.$router.push(`${this.$route.path}?tab=${val}`)
			}
		},
		created() {
			// init the default selected tab
			const tab = this.$route.query.tab
			if (tab) {
				this.activeName = tab
			}
		},
		methods: {
			showCreatedTimes() {
				this.createdTimes = this.createdTimes + 1
			}
		}
	}
</script>

<style scoped>
	.tab-container {
		margin: 30px;
	}
</style>
